import React, { useEffect, useState } from 'react'
import Navbar from '../components/Navbar'
import { Form, Input, Button, Cascader, Switch } from 'antd-mobile'
import { CloseCircleFill } from 'antd-mobile-icons'
import '../style/addaddress.scss'
import { options } from '../utils/option'

// import { connect } from 'react-redux'
// import { store } from '../store'
import { add_address } from '../apis/address'
import { useNavigate } from 'react-router-dom'
// import { useSelector,useDispatch } from 'react-redux'
export default function AddAddress(props: any) {
    // let count = useSelector((state: any) => state.count)
// let dispatch = useDispatch()
    let navigate = useNavigate()
    useEffect(() => {
    }, [])
    const [visible, setVisible] = useState(false)
    const [value, setValue] = useState<string[]>([])
    const [pickerVisible, setPickerVisible] = useState(false)
    const [bool, setbool] = useState(false)

    const onFinish = async (values: any) => {
        const { name, tel, address, detailaddress } = values
        let res = await add_address(localStorage.getItem("userid"), name, tel, address[0], address[1], address[2], detailaddress, bool)
        console.log(res);
        navigate("/addresslist")
    }

    return (
        <div>
            <Navbar title="添加地址"/>

            <Form
                requiredMarkStyle='none'
                onFinish={onFinish}
                layout='horizontal'
                footer={
                    <Button block type='submit' color='danger' size='large' shape='rounded'>
                        保存
                    </Button>
                }
            >
                <Form.Item
                    name='name'
                    label='姓名'
                    rules={[{ required: true, message: '姓名不能为空' }]}
                >

                    <Input clearable placeholder='请输入姓名' />
                </Form.Item>

                <Form.Item name='tel' label='电话' >
                    <Input placeholder='请输入电话' />
                </Form.Item>

                <Form.Item
                    noStyle
                    shouldUpdate={(prevValues, curValues) =>
                        prevValues.birthday !== curValues.birthday
                    }
                >
                    {({ getFieldValue, setFieldsValue }) => (
                        <Form.Item
                            name='address'
                            label='地址'
                            trigger='onConfirm'
                            arrow={
                                getFieldValue('address') ? (
                                    <CloseCircleFill
                                        style={{
                                            color: 'var(--adm-color-light)',
                                            fontSize: 14,
                                        }}
                                        onClick={e => {
                                            e.stopPropagation()
                                            setFieldsValue({ address: '' })
                                        }}
                                    />
                                ) : (
                                    true
                                )
                            }
                            onClick={() => {
                                setVisible(true)
                                setPickerVisible(true)
                            }}
                        >
                            <Cascader
                                options={options}
                                visible={visible}
                                onClose={() => {
                                    setVisible(false)
                                }}
                                value={value}
                                onConfirm={setValue}
                            >
                                {items => {
                                    if (items.every(item => item === null)) {
                                        return '地址'
                                    } else {
                                        return items.map(item => item?.label ?? '未选择').join('-')
                                    }
                                }}
                            </Cascader>
                        </Form.Item>
                    )}
                </Form.Item>

                <Form.Item name='detailaddress' label='详细地址' >
                    <Input placeholder='请输入详细地址' />
                </Form.Item>

                <Form.Item name='default' noStyle>
                    <div className="isddefault">
                        <span>是否设为默认地址</span>
                        <Switch onChange={setbool} />
                    </div>
                </Form.Item>

            </Form>

            {/* 
            <p>{store.getState().count}</p>
            <button onClick={() => { fun() }}>+1</button> */}
            {/* <p>{props.value}</p>
            <button onClick={() => { props.add() }}>+1</button> */}
            {/* <p>{count}</p> */}
        </div>
    )
}

// const mapStateToProps = (state: any) => {
//     return {
//         value: state.count //UI组件中需要什么参数，对象中就写哪些参数
//     }
// }
// const mapDispatchToProps = (dispatch: any) => {
//     return {
//         add: () => dispatch({ type: 'ADD' })
//         // onReduceClick: () => dispatch({type: 'reduce'})
//     }
// }
// export default connect(mapStateToProps, mapDispatchToProps)(AddAddress)
